<!-- 告警中心-数据中心 -->
<template>
    <div class="t-ctn">
        <el-form
            ref="formCheckCfg"
            label-width="80px"
            :inline="true"
            label-position="right"
            :model="formCheckCfg">
            <!--<el-form-item prop="city" label="城市">
                <el-input
                    v-model="formCheckCfg.city"
                    clearable>
                </el-input>
            </el-form-item>-->
            <el-form-item prop="county" label="区域">
                <el-select v-model="formCheckCfg.county" clearable>
                    <el-option
                        v-for="(item,index) in typeOptions"
                        :key="index"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="startTime" label="开始时间">
                <el-date-picker
                    v-model="formCheckCfg.startTime"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="endTime" label="结束时间" style="margin-right: 70px">
                <el-date-picker
                    v-model="formCheckCfg.endTime"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleDataList">确定</el-button>
            </el-form-item>
        </el-form>
        <div class="s-n-ctn-main">
            <div style="height:calc(100% - 45px)" ref="tableWrapper">
                <el-table
                    v-if="tableData.length > 0"
                    ref="singleTable"
                    :data="tableData"
                    stripe
                    style="width: 100%;background-color: transparent;height:calc(100% - 50px);overflow: auto">
                    <el-table-column
                        prop="city"
                        show-overflow-tooltip
                        label="城市">
                    </el-table-column>
                    <el-table-column
                        prop="county"
                        show-overflow-tooltip
                        label="区域">
                    </el-table-column>
                    <el-table-column
                        prop="temp"
                        show-overflow-tooltip
                        label="温度">
                    </el-table-column><!--
                <el-table-column
                    prop="rad"
                    show-overflow-tooltip
                    label="当前太阳辐射强度">
                </el-table-column>-->
                    <el-table-column
                        prop="rh"
                        show-overflow-tooltip
                        label="当前时间湿度">
                    </el-table-column>
                    <el-table-column
                        prop="speed"
                        show-overflow-tooltip
                        label="当前风速">
                    </el-table-column>
                    <el-table-column
                        prop="weaTxt"
                        show-overflow-tooltip
                        label="天气现象">
                    </el-table-column>
                    <el-table-column
                        prop="eda"
                        show-overflow-tooltip
                        label="当前风向">
                    </el-table-column>
                    <el-table-column
                        prop="receiveTime"
                        show-overflow-tooltip
                        label="数据采集时间">
                    </el-table-column>
                </el-table>
            </div>
            <!-- 设计上没有分页 -->
            <Pagination
                v-if="tableData.length > 0"
                :total="total"
                :height="tableH"
                :page.sync="formCheckCfg.pageNo"
                :limit.sync="formCheckCfg.pageSize"
                style="margin-top: 5px"
                @pagination="handleDataList"
            />
        </div>
    </div>
</template>

<script>
    import API from '@/request/api'
    import Pagination from '../../../components/page'
    export default {
        name: 'WeatherInfo',
        components: {
            Pagination
        },
        computed: {

        },
        data() {
            return {
                tableH:0,
                formCheckCfg:{
                    pageNo:1,
                    pageSize:10,
                    city:'',
                    county:'',
                    endTime:'',
                    startTime:'',
                },
                tableData:[],
                typeOptions:[], // 区域
                total: 0,
                endTime:'',
                startTime:'',
            };
        },
        mounted() {
            this.fetTableHeight()
            this.getCountyList()
        },
        watch: {

        },
        methods: {
            // 获取区域列表
            getCountyList(){
                API.getCountyList().then(res =>{
                    if(res.code === 200){
                        this.typeOptions = res.result;
                        this.formCheckCfg.county = res.result[0]
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch( err =>{
                    //this.msgWarning(err);
                })
            },
            resetHeight() {
                return new Promise((resolve, reject) => {
                    this.tableH = 0
                    resolve()
                })
            },
            // 设置table高度
            fetTableHeight() {
                this.resetHeight().then(res => {
                    this.tableH = this.$refs.tableWrapper.getBoundingClientRect().height
                })
            },
            // 获取列表
            handleDataList(){
                const that =this
                this.startTime = this.moment(this.formCheckCfg.startTime).format('yyyy-MM-DD HH:mm:ss');
                this.endTime = this.moment(this.formCheckCfg.endTime).format('yyyy-MM-DD HH:mm:ss');
                let data = {
                        pageNo:this.formCheckCfg.pageNo,
                        pageSize:this.formCheckCfg.pageSize,
                        county:this.formCheckCfg.county,
                        endTime:this.endTime,
                        startTime:this.startTime,
                }
                API.getRealMeteorological(data).then(res => {
                    if(res.code === 200){
                        that.tableData = res.result.Result;
                        that.total = res.result ? res.result.total : 0;
                        if(res.result.Result.length === 0){
                            this.msgWarning('无数据');
                        }
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
              //      this.msgWarning(err);
                });
            },
        }
    };
</script>

<style lang="scss" type="text/scss" scoped>
    .t-ctn {
        height:100% !important;

        ::v-deep .el-form{
            margin-right: 42px;
            margin-left: 46px;
            margin-top: 55px;

            .el-radio{
                color: #ffffff;
            }
        }

        .s-n-ctn-main{
            height: calc(100% - 120px);
        }
    }
</style>
